<template>
  <div>
    <StepProgress :step-index="2" sub-title="确认要操作的云文档链接"/>
    <el-form :inline="true" :model="docForm" class="demo-form-inline">
      <el-tag>可添加多个文档</el-tag>
      <el-form-item label="云文档链接：">
        <el-input
            type="textarea"
            style="width: 350px"
            :maxlength="300"
            v-model="docForm.currentUrl"
            show-word-limit
            placeholder="输入云文档链接"
            autofocus
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addDocUrl">添加<i class="el-icon-plus"/></el-button>
      </el-form-item>
    </el-form>
    <el-timeline>
      <el-timeline-item :key="auth_token" v-for="(docInfo, auth_token) in docForm.docInfos" :timestamp="docInfo.createTime"
                        placement="top">
        <div>
          <el-card>
            <p><strong>创建时间：</strong> {{ docInfo[1].createTime }}</p>
            <p><strong>创建者：</strong> {{ docInfo[1].createUserName }}</p>
            <p><strong>最后编辑时间：</strong> {{ docInfo[1].editTime }}</p>
            <p><strong>最后编辑者：</strong> {{ docInfo[1].editUserName }}</p>
            <p><strong>文档拥有者：</strong> {{ docInfo[1].ownerUserName }}</p>
            <p><strong>文档标题：</strong> {{ docInfo[1].title }}</p>
            <p><strong>文档链接：</strong> <a :href="docInfo[1].url">{{ docInfo[1].title }}</a></p>
          </el-card>
          <el-button @click="goToDocDetail(docInfo[0])" type="primary">查看</el-button>
          <el-button @click="removeFromDocInfos(docInfo[0])" type="danger">移除</el-button>
        </div>
      </el-timeline-item>
    </el-timeline>
    <DocsTree/>
  </div>
</template>

<script>
import StepProgress from '@/components/StepProgress';
import {DocInfo} from '@/store/model/docs/doc';
import DocsTree from '@/components/docs/doc/DocsTree';

export default {
  name: 'docList',
  components: {DocsTree, StepProgress},
  data() {
    return {
      docForm: {
        docInfos: new Map(),
        docUrls: [],
        currentUrl: '',
      },
    };
  },
  created() {
    const {from} = this.$route.params;
    if (from !== undefined) {
      this.docForm.docInfos = this.$store.getters.getDocInfos;
    }
  },
  methods: {
    async getDocInfo(docUrl) {
      const docToken = docUrl.split('\/').pop();
      const content = await this.$request.get({
        url: `/doc/v1/meta/${docToken}`,
      });
      console.log(content);
      if (content.data.code !== 0) {
        this.$message.error('请检查当前身份对文档是否具有编辑/查看权限！');
        return;
      }
      const docData = content.data.data;
      const {
        create_time,
        create_user_name,
        creator,
        edit_time,
        edit_user_name,
        owner,
        owner_user_name,
        title,
        url,
      } = docData;
      const docInfo = new DocInfo();
      docInfo.createTime = this.$utils.formatTime(create_time * 1000);
      docInfo.createUserName = create_user_name;
      docInfo.creator = creator;
      docInfo.editTime = this.$utils.formatTime(edit_time * 1000);
      docInfo.editUserName = edit_user_name;
      docInfo.owner = owner;
      docInfo.ownerUserName = owner_user_name;
      docInfo.title = title;
      if (title.length === 0) {
        docInfo.title = `请文档暂无标题，点击「文档链接」前往飞书云文档重命名～`;
      }
      docInfo.url = url;
      docInfo.auth_token = docToken;
      if (this.docForm.docInfos.has(docToken)) {
        this.$message.error('请勿重复添加文档！');
        return;
      }
      this.docForm.docInfos.set(docToken, docInfo);
      this.$message.success('成功添加新文档！');
      this.$store.commit('insertDocInfo', this.docForm.docInfos);
    },
    addDocUrl() {
      this.docForm.docUrls.push(this.docForm.currentUrl);
      this.getDocInfo(this.docForm.currentUrl);
    },
    goToDocDetail(auth_token) {
      this.$router.push({
        path: `/docs/chooseDoc/${auth_token}`,
        params: {
          'willDirectTo': this.$route.path,
        },
      });
    },
    removeFromDocInfos(docToken) {
      this.docForm.docInfos.delete(docToken);
      this.$store.commit('removeDocInfo', docToken);
      this.$message.success('已成功移除文档');
    },
  },
};
</script>

<style scoped>

</style>
